<template>
	<view>
		<view class="index-top-box" :style="{'padding-top':topNavBarFixHeight+'px'}">
			<view class="top-user-msg" @tap.stop="avatarClk">
				<image class="top-user-avatar" :src="getImgUrl(userInfo.avatar)"></image>
				<view class="top-msg-icon" v-if="unReadMsgNum > 0 || unReadChatNum > 0 || !token"></view>
			</view>
			<text class="top-title">友好评</text>
			<!-- <image class="top-share-icon" src="../../static/planeIcon.png" @tap="toAddComment"></image> -->
			<view class="top-share-icon" @tap="toAddComment">
				<image class="top-share-icon-inner" src="../../static/planeIconInner.png"></image>
			</view>
		</view>
		<view class="fill-shim" :style="{'padding-top':topNavBarFixHeight+'px'}"></view>
	</view>
</template>

<script>
	import { mapState } from "vuex"
	
	export default {
		data() {
			return {
				topNavBarFixHeight: 0,
			}
		},
		computed: {
		  ...mapState(['userInfo','unReadMsgNum','unReadChatNum','token']),
		},
		created() {
			this.topNavBarFixHeight = uni.getSystemInfoSync().statusBarHeight
		},
		methods: {
			avatarClk(){
				if(!this.token){
				    uni.navigateTo({
					    url: '/pages/login/index'
				    })
					return
				}
				this.$emit('avatarClk')
			},
			toAddComment(){
				if(!this.token){
				    uni.navigateTo({
					    url: '/pages/login/index'
				    })
					return
				}
				this.$store.commit('resetNewEvaluate')
				// uni.navigateTo({
				// 	url: '/pages/userDetail/addComment'
				// })
				uni.navigateTo({
					url: '/pages/userDetail/selectCommentTarget?type=1'
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.index-top-box {
		width: 750rpx;
		height: 232rpx;
		box-sizing: border-box;
		background-color: #3399FF;
		display: flex;
		justify-content: center;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1;

		.top-user-msg {
			position: absolute;
			width: 80rpx;
			height: 80rpx;
			bottom: 70rpx;
			left: 40rpx;

			.top-user-avatar {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
			}

			.top-msg-icon {
				position: absolute;
				right: -4rpx;
				top: 4rpx;
				width: 20rpx;
				height: 20rpx;
				background-color: #FA5A32;
				border-radius: 50%;
			}
		}

		.top-title {
			height: 88rpx;
			line-height: 88rpx;
			color: #fff;
			font-size: 36rpx;

		}

		.top-share-icon {
			position: absolute;
			bottom: -28rpx;
			right: 52rpx;
			width: 98rpx;
			height: 98rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			
			background-color: #ffc100;
			border-radius: 50%;
			.top-share-icon-inner{
				width: 60rpx;
				height: 60rpx;
			}
		}
	}

	.fill-shim {
		box-sizing: border-box;
		height: 232rpx;
	}
</style>
